<template>
  <el-container>
    <el-aside style="width: 25%;">
      <div class="card">
        <el-row :span="12" style="height: 25vh">
          <el-col :span="12">
            <el-avatar style="width: 100%;height: 100%;" :src="photo" />
          </el-col>
          <el-col :span="10" style="margin-left: 10px;" class="info">
            <div style="max-width: 100%;white-space: nowrap;">用户名:{{ name }}</div>
            <div>天梯积分:{{ score }}</div>
            <div>比赛场数{{ contestn }}</div>
            <div>共获胜场数:{{ winn }}</div>
            <div>拥有bot数:</div>
            <el-col gutter="2" style="position: absolute; bottom: -8px;">

              <el-button type="primary" @click="infoVisible = true">编辑信息</el-button>
              <el-button type="danger" @click="logoutVisible = true">退出登录</el-button>

            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-aside>
    <el-main style="padding-top: 0px;" shadow="never">
      <userBotShowComponents />
    </el-main>
  </el-container>

  <el-dialog v-model="infoVisible" title="编辑信息" width="500" :before-close="handleClose">
    <div>
      <div class="dig">昵称：<el-input v-model="changeName" style="width: 80%" placeholder="Please input" /></div>

      <el-row>
        <span style="margin-top: 4px;">头像：</span>
        <span>
          <el-upload v-model:file-list="fileList" class="upload-demo" action="http://124.221.73.180:3000/upload/"
            multiple :on-preview="handlePreview" :headers="headersObj" :on-remove="handleRemove" :before-remove="clear"
            :limit="3" :on-exceed="handleExceed" list-type="picture" :on-success="handleSuccess"
            :http-request="uploadFile">
            <el-button type="primary" style="width: 100px;">上传新头像</el-button>
          </el-upload>
        </span>

      </el-row>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="commitInfo()">
          确认
        </el-button>
        <el-button @click="cancel()">取消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="logoutVisible" title="Tips" width="500" :before-close="handleClose">
    <span>确认退出登录吗</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="logout">
          确认
        </el-button>
        <el-button @click="logoutVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import userBotShowComponents from '@/components/info/userBotShowComponents.vue';
import router from '@/router';
import { ref } from 'vue';
import { useStore } from 'vuex';
import $ from 'jquery';
import { ElLoading, ElMessage } from 'element-plus';
export default {
  name: 'infoView',
  components: {
    userBotShowComponents,
  },
  setup() {
    let infoVisible = ref(false);
    let logoutVisible = ref(false);
    let name = ref("");
    let score = ref("");
    let winn = ref("");
    let contestn = ref("");
    let fileList = ref([]);
    let face = ref("");
    let photo = ref("");


    const store = useStore();
    let changeName = ref(store.state.User.name);

    let logout = () => {
      logoutVisible.value = false;
      store.dispatch("logout");
      router.push({ path: "/login/" });
    }
    let getInfo = () => {
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/userInfo/infoGet/",
        cache: false,
        async: false,
        headers: {
          "satoken": store.state.User.token,
        },
        success(resp) {
          let t = JSON.parse(resp);
          name.value = t.name;
          score.value = t.score;
          winn.value = t.winn;
          contestn.value = t.contestn;
          photo.value = t.photo;
        }
      });
    }
    getInfo();

    let uploadFile = () => {//文件上传
      if (fileList.value.length != 1) {
        fileList.value[0] = fileList.value[1];
        fileList.value.splice(1, 1);
      }
      let file = ref(fileList.value[0]);
      var formData = new FormData();
      formData.append("image", file.value.raw);
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/upload/",
        headers: {
          satoken: store.state.User.token,
        },
        data: formData,
        contentType: false,
        processData: false,
        cache: false,
        async: false,
        success(resp) {
          face.value = resp;
        }, error() {
          fileList.value.splice(1, 1);
        }
      })
    }
    let commitInfo = () => {
      if (face.value == "") face.value = store.state.User.photo;
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/userInfo/infoUpdate/",
        cache: false,
        async: false,
        headers: {
          "satoken": store.state.User.token,
        },
        data: {
          name: changeName.value,
          photo: face.value,
        },
        success(resp) {
          if (resp == "success") {
            getInfo();
            const loading = ElLoading.service({
              text: 'Loading',
              background: 'rgba(0, 0, 0, 0.7)',
            })
            setTimeout(() => {
              loading.close()
              infoVisible.value = false;
            }, 2000)
            let t = ref(
              {
                name: changeName.value,
                photo: face.value,
              }
            );
            store.dispatch("update", t.value);
            changeName.value = store.state.User.name;
            fileList.value = [];
          }

          else {
            ElMessage({
              message: '用户名已存在',
              type: 'error',
              plain: true,
            })
            return;
          }
        }
      });

    }
    let cancel = () => {
      changeName.value = name.value;
      fileList.value = [];
      infoVisible.value = false;
    }


    return {
      logout,
      getInfo,
      uploadFile,
      commitInfo,
      cancel,
      photo,

      changeName,
      fileList,
      name,
      score,
      winn,
      contestn,
      infoVisible,
      logoutVisible,
    }
  }
}
</script>

<style scoped>
button {
  width: 40%;
  margin-right: 5px;
}

.info div {
  line-height: 2;
}

.dig div {
  padding: 20px 0px;
}

.card {
  border: 2px solid;
  border-color: rgb(228, 231, 237);
  border-radius: 4%;
  padding: 5% 0px 5% 5px;
}
</style>